@import "mixins";
@import "themes/default";

.upload {
  ul {
    list-style: none;
    padding: 0;
  }

  li {
    line-height: normal;
    padding: $upload-file-padding-y $upload-file-padding-x;
    margin-top: $upload-margin;
    border-radius: $upload-file-border-radius;
    transition: 0.2s ease-out;

    background-color: $upload-file-bg;
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-image: linear-gradient(0deg, $brand-success, $brand-success);

    .remove {
      float: right;
      color: $brand-danger;

      &:hover, &:active {
        color: $brand-danger;
      }
    }

    & > span {
      width: 70%;
      text-overflow: ellipsis;
      display: inline-block;
      overflow: hidden;
    }
  }

  .has-error {
    color: $brand-danger;
    background-size: 100% 2px;
    background-image: linear-gradient(0deg, $brand-danger, $brand-danger);

    .remove {
      color: $brand-danger;
    }
  }

  .is-deleted {
    opacity: 0;
    transform: scale(1,0);
  }
}
